<template>
	<view class="container">
		<view class="addr">
			<view class="addr-line b-b">
				<text class="shopname">{{shopname}}</text>
			</view>
			<view class="addr-line b-b">
				<text class="title">消费总金额（元）</text>
				<input placeholder="请输入需支付的金额" type="digit" class="value"  @input="changes($event)" />
			</view>
			<!-- <view class="addr-line b-b">
				<text class="tip">交易完成后即可获得{{points}}幸福值</text>
			</view> -->
		</view>
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{jine}}</text>
				
			</view>
			<text class="submit" @click="confirm">确认</text>
		</view>
	</view>
</template>

<script>
	import {
	    mapState ,
		mapMutations
	} from 'vuex';  
	export default {
		data() {
			return {
				jine:'',
				id:0,
				//pointsRate:0,
				shopname:'',
				points:0,
				pmember_id:'',
				logining: false,
				edikou:'',
				jine1:'',
				jifen:''
			};
		},
		onLoad(option){
			this.id = option.id;
			this.loadData(this.id);
		},
		computed: {
			...mapState(['hasLogin','userInfo']),
			...mapMutations('login'),
		},
		methods:{
			changes(event){
				this.jine=event.detail.value;
			},
			async loadData(id){
				this.$api.get({
					url: '/wanlshop/Small/shopinfoperson',
					data:{
						loaclhost_id: this.id
					},
					success: res => {
						this.shopname = res.shop_name;
						}
						})
			},
			// jineChanged(e){
			// 	this.jine = e.detail.value;
			// 	this.points = this.jine * (this.pointsRate / 100);
			// },
			confirm(){
				
				// this.$api.msg('请使用微信支付！'); 
				if(this.jine == 0 || this.jine == ''){
					this.$api.msg('请输入金额！'); 
					return;
				}
				this.$api.post({
						url: '/wanlshop/Small/CreatePayOrderUnderLine',
						data: {
							"merchantId":this.id,
							"totalPay":this.jine,
							'type':1
						},	success: res => {
							this.$jssdk.wxpay({
								data: res,
								success: e => {
									this.paySuccess();
								},
								fail: err => {
									if (err.errMsg == "chooseWXPay:ok") {
										this.$wanlshop.msg('支付成功');
									}else if (err.errMsg == "chooseWXPay:cancel") {
										this.$wanlshop.msg('支付失败，取消支付');
									}else if (err.errMsg == "chooseWXPay:fail") {
										this.$wanlshop.msg('支付失败');
									}
								}
							})
						}
				})
			},
			paySuccess(){
				this.disabled = false;
				this.$wanlshop.to(`/pages/page/success?type=pay&order_type=${this.order_type ? this.order_type:'small'}`);
			}
			
		}
	}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	
	.addr{
		margin: 20upx 25upx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		
		.addr-line{
			display: flex;
			flex-direction: row;
			position:relative;
			padding: 0 20upx;
			color:#75787d;
			font-size: $font-base;
			.title{
				width: 40%;
				height: 100upx;
				line-height: 100upx;
			}
			.shopname{
				height: 100upx;
				line-height: 100upx;
				font-size: $font-lg;
				font-weight: bold;
				color: black;
				
			}
			.tip{
				height: 100upx;
				line-height: 100upx;
				font-size: $font-sm;
				color: $base-color;
			}
			.value{
				width: 60%;
				height: 100upx;
				font-size: $font-base;
			}
			&.b-b:after{
				left: 0upx;
			}
		}
	}
	
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0,0,0,.1);
		.price-content{
			padding-left: 30upx;
		}
		.price-tip{
			color: $base-color;
			margin-left: 8upx;
		}
		.price{
			font-size: 36upx;
			color: $base-color;
		}
		.submit{
			display:flex;
			align-items:center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: $base-color;
		}
	}
</style>
